<template>
  <div class="app-container">
    <el-form label-width="80px" :inline="true" size="normal">
      <el-form-item>
        <el-input
          placeholder="请输入用户名"
          size="normal"
          clearable
          v-model="tempSearchObj.username"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetSearch">清空</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" size="default" @click="showAddUser"
      >添加</el-button
    >
    <el-button type="danger" size="default" @click="totalDelete">批量删除</el-button>
    <el-table
      ref="multipleTable"
      v-model="searchObj"
      tooltip-effect="dark"
      style="width: 100%; margin-bottom: 20px"
      :data="users"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="120">
      </el-table-column>
      <el-table-column prop="nickName" label="用户昵称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="roleName" label="角色列表" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="gmtModified"
        label="更新时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template v-slot="{ row, $index }">
          <div>
            <el-button
              type="primary"
              icon="el-icon-user-solid"
              size="small"
              @click="showAssignRole(row)"
              title="分配角色"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="updateUser(row)"
              title="修改用户"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-delete"
              size="small"
              @click="removeUser(row.id)"
              title="删除角色"
            ></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="getUserList"
      :current-page.sync="page"
      :page-sizes="[5, 10, 15, 20, 30, 40, 50]"
      :page-size="limit"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      background
    >
      :pager-count="7">
    </el-pagination>
    <!--  对话框 -->
    <el-dialog
      :title="user.id ? '添加用户' : '修改用户'"
      :visible.sync="dialogUserVisible"
      width="30%"
    >
      <el-form label-width="80px" :inline="false" size="normal" :model="user">
        <el-form-item label="用户名">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="user.nickName"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" v-if="!user.id">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
      </el-form>
      <!-- :model="form" -->
      <span slot="footer">
        <el-button @click="">取消</el-button>
        <el-button type="primary" @click="addOrUpdate">确定</el-button>
      </span>
    </el-dialog>
    <!-- 设置角色对话框 -->
    <el-dialog title="设置角色" :visible.sync="dialogRoleVisible" width="30%">
      <el-form ref="form" label-width="80px" :inline="false" size="normal">
        <el-form-item label="用户名">
          <el-input disabled :value="user.username"></el-input>
        </el-form-item>
        <el-form-item label="角色列表">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="assignRoles"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="item in allRolesList" :key="item.id" :label="item.id">{{
              item.roleName
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button type="primary" @click="saveRole">保存</el-button>
        <el-button @click="">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


export default {
  data() {
    return {
      page: 1,
      limit: 5,
      searchObj: {
        username: "",
      },
      tempSearchObj: {
        //搜索name
        username: "",
      },
      users: [], //当前用户列表
      total: 0,
      dialogUserVisible: false, //添加修改对话框是否显示
      dialogRoleVisible: false, //是否角色显示
      checkAll: false,
      isIndeterminate: true,

      user: {
        username: "",
        password: "",
        nickName: "",
      }, //当前要操作的user
      allRolesList: [],
      assignRoles: [],
      userId:"",
      ids:[]
    };
  },
  mounted() {
    //获取用户列表
    this.getUserList();
  },
  methods: {
    //获取用户分页列表
    async getUserList(page = 1) {
      this.page = page;
      const { limit, searchObj } = this;
      const result = await this.$API.user.getPageList(page, limit, searchObj);

      const { items, total } = result.data;
      this.users = items.filter((item) => item.username !== "admin");

      this.total = total - 1;
      this.selectedIds = [];
    },
    //根据输入进行搜索
    search() {
      this.searchObj = { ...this.tempSearchObj };
      this.getUserList();
    },
    //重置搜索
    resetSearch() {
      (this.searchObj = ""), (this.tempSearchObj = "");
      this.getUserList();
    },
    //分页器回调
    handleSizeChange(pageSize) {
      this.limit = pageSize;
      this.getUserList();
    },
    //添加用户回调
    showAddUser() {
      this.user = {
        username: "",
        password: "",
        nickName: "",
      };
      this.dialogUserVisible = true;
    },
    //修改用户回调
    updateUser(row) {
      this.user = row;
      this.dialogUserVisible = true;
    },
    //确定按钮回调
    async addOrUpdate() {
      const { user } = this;
      
      if (user.id) {
        result = await this.$API.user.update(user);
      } else {
        result = await this.$API.user.add(user);
      }
      this.getUserList();
      this.dialogUserVisible = false;
    },
    //分配角色
    async showAssignRole(row) {
      this.user=row;
      this.userId=row.id;
      this.dialogRoleVisible = true;
      let result = await this.$API.user.getRoles(row.id);
      this.allRolesList = result.data.allRolesList;
      this.assignRoles = result.data.assignRoles.map(item=>item.id);
 
    },
    //分配角色确定回调
   async saveRole() {
    let roleId = this.assignRoles.join(",");
      let result=await this.$API.user.assignRoles(this.userId,roleId)
      this.dialogRoleVisible = false;
    },

    
    //删除用户

    async removeUser(id) {
      let result = await this.$API.user.removeById(id);
      console.log(result);
      this.$notify({
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success",
      });
      this.getUserList();
    },
       //全选按钮的监听
       handleSelectionChange(selection){
      this.ids=selection.map(item=>item.id)
    },
    //批量删除的回调
   async totalDelete(){
      let result=await this.$API.user.removeUsers(this.ids)
      console.log(result);
      this.getUserList();
    },
 
    //角色回调
    handleCheckAllChange(val) {
      // console.log(val);
      this.assignRoles = val ? this.rolesLists.map((item) => item.id) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.rolesLists.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.rolesLists.length;
    },
    handleCheckAllChange(val) {
     
      this.assignRoles = val ?  this.allRolesList.map(item=>item.id) : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
     
      let checkedCount = value.length;
      this.checkAll = checkedCount=== this.allRolesList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.allRolesList.length;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>